<template>
  <h1>简单图表数据</h1>
  <hr />
  <p class="xlfx" style="text-align: center; font-size: 25px">销量分析平滑折线图</p>
  <div ref="main" style="width: 100%; height: 80%"></div>
</template>

<script setup lang="ts">
// 导入echats
import * as echarts from "echarts/core";
import { ref, onMounted, reactive } from "vue";
import service from "../../../utils/service";

const main = ref();
onMounted(() => {
  getDataList()
});

// 获取图表数据
const getDataList = () => {
  service({
    url: "/admin/data/simpleData",
  }).then((res: any) => {
    if (res.data.code === "200") {
      res.data.data.forEach((item: any) => {
        valx.push(item.x)
        valy.push(item.val)
      });
    }
  }).then(()=>{
    initEcgarts() //数据更新后调用initeCharts()
  })
};

const valx=reactive<string[]>([])
const valy=reactive<string[]>([])
console.log("valx",valx)
console.log("valy",valy)

const initEcgarts = () => {

  const myChart = echarts.init(main.value);

  let option = {
    toolbox: {
      feature: {
        saveAsImage:{}
      }
    },
    xAxis: {
      type: "category",
      data: valx,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: valy,
        type: "line",
        smooth: true
      },
    ],
  };
  option && myChart.setOption(option);
};
</script>

<style>
</style>